<template>
    <div class="category">
        <!-- 分类 -->
        <div class="classify Function-list">
            <div class="add" v-for="items in typeList" :key="items._id">
                <div class="add_box">
                    <div class="add_title">
                        <el-button type="text" @click="addType(items.typeData)">
                            <img src="static/img/icon-1.png " alt=" ">
                        </el-button>
                        <div class="GroupName ">{{items.typeData.typeName}}</div>
                    </div>
                    <div class="add_right ">
                        <span class="dele ">
                            <el-button type="primary" size="small" @click="removeType(items.typeData)">删除</el-button>
                        </span>
                        <div class="Button">
                            <el-button type="primary" size="small" @click="editType(items.typeData)">编辑</el-button>
                        </div>
                    </div>
                </div>
                <!-- 项目的增删改查 -->
                <div class="ProjectList " v-for="detail in items.detailsList " :key="detail._id ">
                    <div class="add_project ">
                        <span></span>
                        <p type="text " class="proName ">{{detail.detailName}}</p>
                    </div>
                    <div class="add_righ">
                        <span class="dele">
                            <el-button size="mini" class="buttonIndex" @click="removeDetail(detail)">删除</el-button>
                        </span>
                        <div class="Button ">
                            <el-button size="mini" class="buttonIndex" @click="editDetail(detail)">编辑</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="ListButton ">
            <div class="AddButton " v-on:click="addGourp() ">添加分类</div>
        </div>
    </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      typeList: [],
      projectDetails: []
    };
  },
  methods: {
    addGourp: function() {
      this.$prompt("请输入分类名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.createProjectType(value);
        })
        .catch(() => {
          this.message("取消输入", "info");
        });
    },
    createProjectType: function(val) {
      //创建项目类型
      this.$http.post("api/createProjectType", { typeName: val }).then(
        res => {
          let result = res.data;
          if (result.code == 100) {
            this.message("添加成功", "success");
            this.initList();
          }
        },
        err => {}
      );
    },
    //删除一个分类
    removeType: function(typeId) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          this.deteleProjectAllByTypeId(typeId);
        })
        .catch(() => {
          this.message("取消删除", "info");
        });
    },
    deteleProjectAllByTypeId: function(typeId) {
      this.$http.post("api/deteleProjectAllByTypeId", { typeId: typeId }).then(
        res => {
          let result = res.data;
          console.log(result, "result");
          if (result.code == 100) {
            this.message("删除成功", "success");
            this.initList();
          } else if (result.code == 101) {
            this.message("删除失败。请确保该分类下无内容方可删除", "warning");
          }
        },
        err => {}
      );
    },
    //添加项目
    addType: function(res) {
      let typeId = res._id;
      this.$prompt("请输入项目名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.createProjectDetailByTypeId(typeId, value);
          this.message(value, "success");
        })
        .catch(() => {
          this.message("取消输入", "info");
        });
    },
    createProjectDetailByTypeId: function(typeId, value) {
      this.$http
        .post("api/createProjectDetailByTypeId", {
          typeId: typeId,
          detailName: value
        })
        .then(
          res => {
            let result = res.data;
            if (result.code == 100) {
              this.message("添加成功", "success");
              this.initList();
            }
          },
          err => {}
        );
    },
    //删除项目
    removeDetail: function(detail) {
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          this.deteleDetailById(detail);
        })
        .catch(() => {
          this.message("取消删除", "info");
        });
    },
    deteleDetailById: function(detail) {
      this.$http.post("api/deteleDetailById", detail).then(
        res => {
          let result = res.data;
          if (result.code == 100) {
            this.message("删除成功", "success");
            this.initList();
          } else if (result.code == 101) {
            this.message("删除失败。该项目已被使用，不可删除", "warning");
          }
        },
        err => {}
      );
    },
    //修改分类
    editType: function(val) {
      let typeName = val.typeName;
      let typeId = val._id;
      this.$prompt("请输入要修改的分类名称", "编辑", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: typeName
      })
        .then(({ value }) => {
          this.editTypeById(typeId, value);
        })
        .catch(() => {
          this.message("取消输入", "info");
        });
    },
    editTypeById: function(typeId, value) {
      this.$http
        .post("api/editTypeById", { typeId: typeId, typeName: value })
        .then(
          res => {
            let result = res.data;
            if (result.code == 100) {
              this.message("修改成功", "success");
              this.initList();
            }
          },
          err => {}
        );
    },
    //修改项目
    editDetail: function(detail) {
      let detailId = detail._id;
      this.$prompt("请输入要修改的项目名称", "编辑", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValue: detail.detailName
      })
        .then(({ value }) => {
          this.editDetailByDetailId(detailId, value);
        })
        .catch(() => {
          this.message("取消输入", "info");
        });
    },
    editDetailByDetailId: function(detailId, value) {
      this.$http
        .post("api/editDetailByDetailId", {
          detailId: detailId,
          detailName: value
        })
        .then(
          res => {
            let result = res.data;
            if (result.code == 100) {
              this.message("修改成功", "success");
              this.initList();
            }
          },
          err => {}
        );
    },
    message: function(msg, type) {
      //公用message
      this.$message({
        type: type,
        message: msg
      });
    },
    initList: function() {
      this.$http.post("api/queryList").then(
        res => {
          let result = res.data;
          if (result.code == 100) {
            this.typeList = result.data;
          }
        },
        err => {}
      );
    }
  },
  created: function() {
    this.initList(); //项目类型初始化
  }
};
</script>
<style lang="css" scoped>
.add_project {
  width: 69%;
}

.left {
  width: 66.4%;
}

.ProjectList {
  margin-left: 92px;
  height: 30px;
  position: relative;
  top: -29px;
  font-size: 16px;
  display: -webkit-box;
}

.proName {
  margin-bottom: 1rem;
  display: inline-block;
}

.add_project span:nth-child(1) {
  display: inline-block;
  width: 18px;
  height: 54px;
  position: relative;
  top: -5px;
  border-left: 1px dashed #ddd;
  border-bottom: 1px dashed #ddd;
}

.project {
  display: inline;
  position: relative;
}

.GroupNameInput {
  margin-bottom: 3rem;
  margin-top: 10px;
  margin-left: 10px;
  width: 200px;
  padding: 0 10px;
  line-height: 26px;
  font-size: 14px;
  box-shadow: 0 0 5px 0 #666;
  display: block;
}

.GroupName {
  margin-top: 1.1rem;
  margin-left: 1rem;
  font-size: 18px;
  color: #333;
}

.add {
  width: 90%;
  background: #fff;
  box-shadow: 2px 2px 3px 0 #e0e0e0;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}

.add_box {
  display: -webkit-box;
}

.category {
  margin: 2rem 0 0 5%;
}

.add_title {
  padding: 2rem 2rem 0 2rem;
  display: -webkit-box;
  width: 70%;
}

.add_title p {
  margin-top: 0.3rem;
  padding-left: 1.2rem;
  font-size: 1.2rem;
}

.add_title img {
  width: 2rem;
  margin-bottom: 2rem;
}

.dele {
  color: #666;
  padding-right: 1rem;
}

.add_right {
  /* display: block; */
  line-height: 8rem;
}

.add_righ {
  /* display: block; */
  line-height: 6rem;
}

.ListButton {
  padding: 50px 0;
}

.AddButton {
  background-color: #088ee7;
  color: #fff;
  margin: 0 30%;
  cursor: pointer;
  width: 300px;
  font-size: 18px;
  line-height: 36px;
  text-align: center;
  border-radius: 4px;
  /* box-shadow: 2px 2px 5px 0 #999; */
}

.Function-list .Button {
  display: inline;
  cursor: pointer;
  color: #666;
  margin: 5px;
  font-size: 1rem;
  line-height: 26px;
  text-align: center;
  border-radius: 4px;
  transition: 0.1s ease-in;
}

.Function-list .Button i {
  margin-right: 3px;
}

.Function-list .Button:hover {
  background-color: #e0e0e0;
}

.Function-list .Buttonhover {
  background-color: #088ee7;
  box-shadow: 0 0 5px 0 #666;
  color: #fff;
}

.Function-list .Buttonhover:hover {
  background-color: #088ee7;
}

.buttonIndex {
  position: relative;
  z-index: 100;
}
</style>